<template>
  <div>
    <div class="title-wrapper" v-if="titleShow">
      <tab :tabs="tablist" activeName="problem"></tab>
      <ul class="helpbox">
        <li v-for="(contItem, contIndex) in helpList.list" :key="contIndex">
          <!-- <router-link :to="{name: 'HelpContent', params: {id: contItem.id}}" class="title">{{contIndex + 1 }}:{{contItem.title}}</router-link> -->
          <a @click="fetchContent(contItem.id)" class="title">{{contIndex + 1 }}:{{contItem.title}}</a>
        </li>
      </ul>
      <!-- pagination -->
      <el-row v-if="helpList.page && helpList.page.totalPages > 1">
        <el-pagination class="page_box"  layout="total, prev, pager, next, ->"  :total="helpList.page.totalRecords" :page-size="helpList.page.pageSize" @current-change="handlePage" ></el-pagination>
      </el-row>
    </div>
    <div class="content" v-else>
      <el-button type="text" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
      <div class="content-box">
        <h2 class="title">{{content.title}}</h2>
        <div v-html="content.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {Tabs, TabPane, Collapse, CollapseItem, Button} from 'element-ui'
  import {tab} from '@/components/index'
  import {helplist, helpContentObj} from '@/service/get-data'
  export default {
    components: {
      elTabs: Tabs,
      elTabPane: TabPane,
      elCollapse: Collapse,
      elCollapseItem: CollapseItem,
      tab,
      elButton: Button
    },
    data () {
      return {
        titleShow: true,
        activeName: 'first',
        page: 1,
        helpList: {}, // 帮助列表
        tablist: [{name: 'problem', text: '常见的问题'}],
        content: {}
      }
    },
    methods: {
      async fetchHelpList () {
        let loadingHelp = this.$loading({target: '.helpbox'})
        let res = await helplist(this.page)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          loadingHelp.close()
          res = res.data
          this.helpList = res.data
        } else {
          this.$message({
            message: res.data.resultMsg
          })
        }
      },
      handlePage (page) {
        this.page = page
        this.fetchHelpList()
      },
      // 获取帮助内容
      async fetchContent (id) {
        this.titleShow = false
        let res = await helpContentObj(id)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          res = res.data
          this.content = res.data
        }
      },
      // 返回
      goBack () {
        this.titleShow = true
      }
    },
    // mounted () {
    //   this.fetchHelpList()
    // },
    activated () {
      this.fetchHelpList()
    }
  }
</script>

<style lang="scss" scoped>
  .title{
    display: block;
    font-size: 14px;
    color: #666;
    line-height: 40px;
    &:hover{
      background-color: #f0f0f0;
    }
  }
  .content{
    font-size: 14px;
    color: #666666;
  }
  
</style>
